<template>
  <div ref="canvasRef"></div>
</template>

<script setup lang="ts">
import * as charts from 'echarts';
import {onMounted, ref, watch} from "vue";

/**
 * 图表
 */
interface Props {
  /** echarts 参数配置 */
  options: echarts.EChartsOption
}

// 使用 withDefaults 设置默认值
const props = withDefaults(defineProps<Props>(), {})

// 画布
const canvasRef = ref();

// 制作图表
const make_chart = () => {
  let chart = charts.init(canvasRef.value);
  chart.setOption(props.options);
}

// 侦听图表参数变化
watch(() => props.options, (val) => {
  make_chart();
});

// 首次载入
onMounted(() => {
  if (props.options != null) {
    make_chart();
  }
});
</script>

